<template>
    <div class="app-container">

        <!-- 表格 -->
        <el-table
        :data="list"
        border
        fit
        highlight-current-row>

        <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
            {{ scope.$index + 1 }}
            </template>
        </el-table-column>


        <el-table-column prop='title' label="公告名称" width="80">
        </el-table-column>

        <el-table-column prop="linkUrl" label="点击跳转链接" />

        <el-table-column label="公告图片">
            <template slot-scope="scope">
                <img :src="scope.row.imageUrl" width="100%" height="100%">
            </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
    </div>
</template>
<script>
//引入 js 文件
import section from '@/api/manager/banner'
export default {
   // data:{

   // data的两种写法，均可
    data(){return{
            list:null//查询之后接口返回集合
        }
    },
    created(){this.getList()
    },
    methods:{getList(){ section.getBannerListPage()
            .then(response => {
               console.log(response)
                this.list = response.data.items
            }).catch(error => {
                console.log(error)
            })},
        removeDataById(id){
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
               section.deleteBannerId(id)
                    .then(response => {
                       this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                       this.getList()
                    })
                    .catch()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
            });
            });
        },
    }
}
</script>
